<template>
  <div class="item">
    <div class="item__rank" >{{id+1}}</div>
    <div class="item__content">
      <div class="item__des">
        <span class="item__name">
          {{searchItem.searchWord}}
        </span>
        <span  class="item__label">
          <img :src="searchItem.iconUrl" alt="" v-if="searchItem.iconUrl">
        </span>
      </div>
      <div class="item__comment">
        {{searchItem.content}}
      </div>
    </div>
    <div class="item__num">
      {{searchItem.score}}
    </div>
  </div>
</template>
<script setup>
import { defineProps } from "vue";
defineProps({
  searchItem:Object,
  id:Number
})
</script>
<style lang="stylus">
.item
  display flex

  .item__rank
    height 44px
    width 30px
    line-height 44px  
    font-weight 700
    color #7c7c7c
  .item__content
    display flex
    justify-content center 
    align-items left 
    flex-direction column
    flex 1
    .item__name
      font-size 16px
      font-weight 500
    .item__label
      display inline-block
      margin-left 5px
      width 40px
      height 100%
      img
        width 20px
        height 16px
    .item__comment
      margin-top 3px
      color #7b7b7b;
      font-size 12px
      overflow hidden
      text-overflow ellipsis
      white-space nowrap
      width 200px
  .item__num
    line-height 44px
    color #ccc
    font-size 14px
</style>